import { 
  Switch,
  AppBar, 
  Toolbar,
  Button,
  styled
} from '@mui/material';
import { alpha } from '@mui/material/styles';

// Color constants to match TreeItem styling
const baseColor = '#00fff2';
const accentColor = '#00fff2';

// Styled material UI switch for dark mode
const DarkModeSwitch = styled(Switch)(({ theme }) => ({
  width: 62,
  height: 34,
  padding: 7,
  '& .MuiSwitch-switchBase': {
    margin: 1,
    padding: 0,
    transform: 'translateX(6px)',
    '&.Mui-checked': {
      color: '#fff',
      transform: 'translateX(22px)',
      '& .MuiSwitch-thumb:before': {
        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
          '#fff',
        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
      },
      '& + .MuiSwitch-track': {
        opacity: 1,
        backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
      },
    },
  },
  '& .MuiSwitch-thumb': {
    backgroundColor: theme.palette.mode === 'dark' ? '#003892' : '#001e3c',
    width: 32,
    height: 32,
    '&:before': {
      content: "''",
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: 0,
      top: 0,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
        '#fff',
      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
    },
  },
  '& .MuiSwitch-track': {
    opacity: 1,
    backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
    borderRadius: 20 / 2,
  },
}));

// Styled AppBar with TreeItem styling
const StyledAppBar = styled(AppBar)(({ theme, darkMode }) => ({
  visibility: 'visible !important',
  transform: 'none !important',
  margin: 0,
  padding: 0,
  backgroundColor: 'rgba(0, 0, 0, 0) !important', // Transparent background
  
  // Light Mode (Applying TreeItem styling)
  ...(!darkMode && { 
    background: 'linear-gradient(145deg, rgba(255, 255, 255, 0), rgba(223, 227, 238, 0))',
    boxShadow: 'inset 3px 3px 7px rgba(223, 227, 238, 0.9), inset -3px -3px 7px rgba(255, 255, 255, 1), 0 6px 12px rgba(0, 0, 0, 0.08)',
    color: 'rgba(0, 2, 3, 0.9)',
    '&:hover': {
      background: 'linear-gradient(135deg, rgba(223, 227, 238, 0), rgba(255, 255, 255, 0))',
    }
  }),
  
  // Dark Mode (TreeItems styling with black and dark cyan)
  ...(darkMode && {
    background: 'linear-gradient(145deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))',
    boxShadow: 'inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.08), 0 8px 15px rgba(0, 255, 242, 0.15)',
    color: 'rgba(255, 255, 255, 0.9)',
    '&:hover': {
      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))',
    }
  })
}));

// Styled Toolbar with TreeItem styling
const StyledToolbar = styled(Toolbar)(({ theme, darkMode }) => ({
  padding: '8px 16px',
  margin: 0,
  width: '100%',
  justifyContent: 'space-between',
  alignItems: 'center',
  height: 64, // Moved from AppBar
  borderRadius: '32px', // Moved from AppBar
  
  // Light Mode (Applying TreeItem styling)
  ...(!darkMode && { 
    background: 'rgba(0, 0, 0, 0)', // Transparent background
    backgroundColor: 'rgba(0, 0, 0, 0) !important', // Transparent background
    boxShadow: 'inset 2px 2px 6px rgba(223, 227, 238, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 4px 8px rgba(0, 0, 0, 0.05)',
    color: 'rgba(0, 2, 3, 0.9)',
    '& .MuiTypography-root': {
      color: 'rgba(0, 2, 3, 0.9)',
      letterSpacing: '0.5px',
    },
    '&:hover': {
      background: 'rgba(0, 0, 0, 0)', // Transparent background
      boxShadow: 'inset 3px 3px 7px rgba(223, 227, 238, 0.9), inset -3px -3px 7px rgba(255, 255, 255, 1), 0 6px 12px rgba(0, 0, 0, 0.08)',
    }
  }),
  
  // Dark Mode (TreeItems styling with black and dark cyan)
  ...(darkMode && {
    background: 'rgba(0, 0, 0, 0)', // Transparent background
    backgroundColor: 'rgba(0, 0, 0, 0) !important', // Transparent background
    boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.3)',
    border: '1px solid rgba(0, 255, 242, 0.25)', // Moved from AppBar
    color: 'rgba(255, 255, 255, 0.9)',
    '& .MuiTypography-root': {
      color: 'rgba(255, 255, 255, 0.9)',
      letterSpacing: '0.5px',
    },
    '&:hover': {
      background: 'rgba(0, 0, 0, 0)', // Transparent background
      boxShadow: 'inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.08), 0 8px 15px rgba(0, 255, 242, 0.15)',
    }
  })
}));

// Styled Button with TreeItem styling
const StyledButton = styled(Button)(({ theme, darkMode }) => ({
  textTransform: 'none',
  borderRadius: '12px',
  margin: darkMode ? '4px 0' : 0,
  
  // Light Mode
  ...(!darkMode && {
    backgroundColor: 'transparent !important',
    background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(223, 227, 238, 0.45))',
    boxShadow: 'inset 2px 2px 6px rgba(223, 227, 238, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 4px 8px rgba(0, 0, 0, 0.05)',
    color: 'rgba(0, 2, 3, 0.9)',
    '&:hover': {
      backgroundColor: 'transparent !important',
      background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.45), rgba(255, 255, 255, 0.95))',
      boxShadow: 'inset 3px 3px 7px rgba(223, 227, 238, 0.9), inset -3px -3px 7px rgba(255, 255, 255, 1), 0 6px 12px rgba(0, 0, 0, 0.08)',
      '& .MuiButton-label': {
        color: accentColor,
        textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
      },
    },
    '&:active': {
      boxShadow: 'inset 3px 3px 6px rgba(223, 227, 238, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.5)',
    },
  }),
  
  // Dark Mode (TreeItems styling with black and dark cyan)
  ...(darkMode && {
    backgroundColor: 'transparent !important',
    background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03))',
    boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.3)',
    color: 'rgba(255, 255, 255, 0.9)',
    border: '1px solid rgba(0, 255, 242, 0.25)',
    '&:hover': {
      backgroundColor: 'transparent !important',
      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09))',
      boxShadow: 'inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.08), 0 8px 15px rgba(0, 255, 242, 0.15)',
      color: '#00FFF2',
      border: `2px solid ${accentColor}`,
      '& .MuiSvgIcon-root': {
        color: '#00FFF2'
      },
      '& .MuiButton-label': {
        color: accentColor,
        textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
      },
    }
  }),
  '&.contained': {
    ...(!darkMode && {
      color: 'rgba(0, 2, 3, 0.9)',
    }),
    '&:hover': {
      '& .MuiButton-label': {
        color: accentColor,
        textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
      },
    },
  },
  '&.outlined': {
    ...(!darkMode && {
      border: `1px solid ${alpha(baseColor, 0.5)}`,
      '&:hover': {
        border: `2px solid ${accentColor}`,
      }
    }),
    ...(darkMode && {
      border: '1px solid rgba(0, 255, 242, 0.25)',
      '&:hover': {
        border: `2px solid ${accentColor}`,
      }
    }),
  },
  '&.textPrimary': {
    color: baseColor,
    '&:hover': {
      color: accentColor,
    },
  },
}));

export {
  DarkModeSwitch,
  StyledAppBar,
  StyledToolbar,
  StyledButton
};